<template>
 <div>
     <div class="home-menu">
         <div class="container-fluid">
             <div class="row">
                
                 <section id="leftMenu" class="col-12">
                     <!-- //左边的菜单栏，手机端自适应 -->
                     <div class="row">
                         <div class="navbar-nav-scroll col-12 d-block d-lg-none ">
                            <ul class="navbar-nav bd-navbar-nav flex-row pl-3 pr-3">
                                <li class="nav-item  mr-3 ml-1 ">
                                    <router-link to="/homePage/shareSquare/allShare?id=all" class="nav-link">所有</router-link>
                                </li>
                                <li class="nav-item mr-3">
                                    <router-link to="/homePage/shareSquare/tecShare?id=tec" class="nav-link">技术分享</router-link>
                                </li>
                                <li class="nav-item mr-3">
                                    <router-link to="/homePage/shareSquare/fileShare?id=file" class="nav-link">素材藏馆</router-link>
                                </li>
                                <li class="nav-item mr-3">
                                    <router-link to="/homePage/shareSquare/dailyShare?id=daily" class="nav-link">日记分享</router-link>
                                </li>
                                <li class="nav-item ">
                                    <router-link to="/homePage/shareSquare/adShare?id=ads" class="nav-link mr-2">广告中心</router-link>
                                </li>
                               
                                
                            </ul>
                        </div>
                    </div>
                 </section>
             </div>
         </div>

           

               
               
         </div>
         <!-- 电脑端布局 -->
         <div class="container-fluid ml-0 pl-0 mr-0 pr-0">
             <div class="row">
                  <div class='col-lg-3'></div>
                 <section id="lg-menu" class="d-none d-lg-block  left-lg-menu">
                    
                    <el-menu
                                    default-active="2"
                                    class="el-menu-vertical-demo d-none d-lg-block col-lg-12"
                                    background-color="#545c64"
                                    text-color="#fff"
                                    router
                                    active-text-color="#ffd04b" >
                                    <el-menu-item  index="/homePage/shareSquare/allShare?id=all">
                                        
                                        
                                        <span slot="title">所有</span>
                                        
                                    </el-menu-item>
                                    <el-menu-item index="/homePage/shareSquare/tecShare?id=tec">
                                        
                                        <span slot="title">技术分享</span>
                                    </el-menu-item>
                                    <el-menu-item index="/homePage/shareSquare/fileShare?id=file">
                                        <i class="iconfont icon-ershoushebei"></i>
                                        <span slot="title">素材藏馆</span>
                                    </el-menu-item>
                                    <el-menu-item index="/homePage/shareSquare/dailyShare?id=daily">
                                        
                                        <i class="iconfont icon-aiqingyulangman-"></i>
                                        <span slot="title">日记</span>
                                    </el-menu-item>
                                    <el-menu-item index="/homePage/shareSquare/adShare?id=ads">
                                        <i class="iconfont icon-xinbaniconshangchuan-"></i>
                                        <span slot="title">广告中心</span>
                                    </el-menu-item>
                                    

                                    </el-menu>
                   
                 </section>
                 <section id="show-content" class="col-lg-8 col-12 mt-lg-0 mt-5">
                      <router-view></router-view>
                 </section>
             </div>
         </div>
          
 </div>
</template>

<script>
import slider from "../util/slider.vue"
import allShare from "./homeMenu/allShare.vue"
 export default {
   data () {
     return {
    list:[
            {img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568726667159&di=29c37d25f028325da78c7c46d40b5581&imgtype=0&src=http%3A%2F%2Fdpic.tiankong.com%2F3k%2Fxd%2FQJ8258812456.jpg",text:"使用Element实现轮播图组件(el-carousel)的点击事件,切..._CSDN博客"},
            {img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568726667159&di=28a2232cec1426cb713663e7ce8d732a&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-04-25%2F5ae017845ad6f.jpg",text:"hhh"}
         
        ],
    imgs:["https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2176335222,2367097283&fm=26&gp=0.jpg",
        "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1827292225,3445144251&fm=26&gp=0.jpg"
    ],
    users:[
        {icon:"https://qlogo2.store.qq.com/qzone/649579109/649579109/50?1560942204",school:"mju",nick:"Harry",content:"回收今天收到的骚扰短信，1.11/条。到3.30之前有收到都可以拿来!不懂的看这个哈: 网页链接  提取码:bzst",files:"<img src='http://a2.qpic.cn/psb?/V12poWkW32SGoM/hNog5oeam.6iGjqciRSeVG0RE.jTYZILUSkVIrKfG6Q!/c/dG0BAAAAAAAA&ek=1&kp=1&pt=0&bo=WAJTAVgCUwERECc!&t=5&tl=3&vuin=1283482593&tm=1568689200&sce=60-2-2&rf=0-0'>",see:"2",prices:"3",comment:"33","resend":"33",time:"20:09"},
        {icon:"https://qlogo4.store.qq.com/qzone/1074623455/1074623455/50?1568450313",school:"医科大学",nick:"黄义胆",content:"Help在线",files:"<img src='http://a2.qpic.cn/psb?/V12poWkW32SGoM/hNog5oeam.6iGjqciRSeVG0RE.jTYZILUSkVIrKfG6Q!/c/dG0BAAAAAAAA&ek=1&kp=1&pt=0&bo=WAJTAVgCUwERECc!&t=5&tl=3&vuin=1283482593&tm=1568689200&sce=60-2-2&rf=0-0'>",see:"2",prices:"3",comment:"33","resend":"33",time:"20:09"}
    ]
     }
   },
   components: {
       slider,allShare
   },
   methods:{
       
   },
   
 }
</script>
<style>
 .el-card__body{
        padding: 7px;
}
</style>

<style scoped lang='less'>
    .eactive{
        // background: tomato;
   
    border-bottom: solid 1px #ffd04b;
    }
    #leftMenu::-webkit-scrollbar{
        display: none;
    }
    .home-menu{
        // box-shadow: -4px 7px 1px #333333;
        box-shadow: -3px -1px 1px #333333;
        #leftMenu{
            position: fixed;
            top: 63px;
            max-width: 100%;
            overflow: auto;
            background: #e3e3e3;
            z-index: 10000;
        }
         i{
             margin-right: 6px;
             font-size: 18px;
         }
         .navbar-nav-scroll{
             max-width: 100%;
            overflow: hidden;
            padding-right: 0;
            padding-left: 0;
            .nav-link{
                color: #4f4f4f;
            }

         }
         .bd-navbar-nav{
             overflow-x: auto;
            white-space: nowrap;
         }
         .bd-navbar-nav::-webkit-scrollbar {display:none}
         
    }
   .left-lg-menu{
             top:75px;
            position: fixed;
            left: 15%;
         }
</style>
